Map对象和普通对象的7个区别 |
您所在的位置：网站首页 › js map 类型 › Map对象和普通对象的7个区别 |
|
在 JavaScript 中，普通对象和 ES6 的新对象 Map 都可以存储键值对，但是，它们之间有什么区别呢？本文将为您一一揭晓。 1、初始化与使用 普通对象可以直接使用字面量进行初始化，而 Map 需要 Map() 构造函数进行初始化，如果想要有初始值，则需要传递一个数组或其他元素为键值对的可迭代对象。这些键值对中的每一个都将被添加到一个新的 Map 中。 const obj = { name: 1, age: 2, }; const map = new Map([ ['name', 1], ['age', 2], ]);与普通对象相比，Map 作为哈希表提供了许多有用的功能。比如判断一个key是否在hash表中，在map中可以使用has方法轻松判断，但是在普通对象中可能会增加复杂度。 另外，set方法可以为Map设置key值，get方法可以获取value，size属性可以返回当前Map中key/value对的数量，而plain对象需要手动计算使用 自己的方法等。详情见MDN。 2、 密钥类型 普通对象只接受字符串和符号作为键值，其他类型将被强制转换为字符串类型，而 Map 可以接受任何类型的键值（包括函数、对象或任何原语）。 const obj = {}; const map = new Map(); const key = function () {}; obj[key] = 1; map.set(key, 1); // { 'function () {}': 1 } console.log('obj: ', obj); // Map(1) { [Function: key] => 1 } console.log('map: ', map);3、Accidental keys 普通对象从原型继承了许多属性键，例如构造函数等。因此，自己的密钥很可能与原型上的密钥发生冲突。但是 Map 默认不包含任何键，它只包含那些显式放入的。 const obj = {}; const map = new Map(); console.log(obj.constructor); // ƒ Object() { [native code] } console.log(map.get('constructor')); // undefined4、Key order 虽然现在对普通对象的键进行了排序，但情况并非总是如此，而且排序很复杂。例如，如果对象中有键需要转换为字符串，则不保留对象键的原始顺序。虽然 Map 以简单的方式排序，但它始终与我们插入的顺序相同。 const obj = { name: 1, age: 2, 3: 4, }; const map = new Map([ ['name', 1], ['age', 2], [3, 4], ]); // The original order is not preserved. // {3: 4, name: 1, age: 2} console.log('obj: ', obj); // Map(3) { 'name' => 1, 'age' => 2, 3 => 4 } console.log('map: ', map);5、迭代 我们可以使用 for...of 语句或 Map.prototype.forEach 直接迭代 Map 的属性，而普通对象不能直接迭代。 const obj = { name: 1, age: 2, }; const map = new Map([ ['name', 1], ['age', 2], ]); for (const [key, value] of map) { console.log(`${key}: `, value); // name: 1, age: 2 } map.forEach((value, key) => { console.log(`${key}: `, value); // name: 1, age: 2 }); // Plain objects are not iterable directly. // But we can use functions like `Object.keys` to help us. Object.keys(obj).forEach((key) => { console.log(`${key}: `, obj[key]); // name: 1, age: 2 });6、序列化和解析 普通对象支持 JSON 序列化，但 Map 默认无法获取正确数据。 const obj = { name: 1, age: 2, }; const map = new Map([ ['name', 1], ['age', 2], ]); console.log(JSON.stringify(obj)); // "{"name":1,"age":2}" console.log(JSON.stringify(map)); // "{}"7、性能 Map 对象在涉及频繁添加和删除键值对的场景中表现更好，而普通对象没有优化。 总结 那么普通对象应该被 Map 对象替换吗？ 不，如果我们想在 JSON 和原始数据之间转换或包含特定的业务逻辑，那么我们应该使用普通对象。因为当我们只想存储键值对和循环操作或不断添加和删除属性时，使用 Map 对象是更好的选择。 Map对象虽然也是继承自底层的Object.prototype，但它为我们提供了很多实用的方法来减轻我们的认知负担，比普通对象更高级。 以上就是本次分享的所有内容，想要了解更多欢迎前往公众号：web前端开发社区，每日干货分享 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |